<template>
  <div>
    <LinkAnimation :styles="{right:'0px',bottom:'0px',position: 'fixed'}" :show="show" type="right" >
    <div class="link-button"></div>
      <LinkButton  @click="backTop" :type="type" class="link-button"><slot></slot></LinkButton>
    </LinkAnimation>
  </div>
</template>

<script>
import LinkButton from './LinkButton.vue'
import LinkAnimation from './LinkAnimation.vue'
export default {
  props: {
    type: { type: String, default: '' }
  },
  components: { LinkButton, LinkAnimation },
  data () {
    return {
      show: false
    }
  },
  methods: {
    backTop () {
      const timer = setInterval(() => {
        window.scroll(0, window.scrollY - 50)
        if (window.scrollY <= 0) {
          clearInterval(timer)
        }
      }, 10)
    },
    scroll () {
      if (window.scrollY >= 50) {
        this.show = true
      } else {
        this.show = false
      }
    }
  },
  mounted () {
    window.addEventListener('scroll', this.scroll)
  }
}
</script>

<style scoped>
.link-button {
  /* position: fixed; */
  /* bottom: 0;
  right: 0; */
  /* background-color: aqua;
  width: 300px;
  height: 300px; */
}
</style>
